<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @addFn="addFn" :list="list" @checkAll="checkAll"></TodoHeader>
    <TodoMain :list="isshowList" @delFn="delFn" @changeFn="changeFn"></TodoMain>
    <TodoFooter
      :list="list"
      :type="type"
      @clearFn="clearFn"
      @changType="changType"
    ></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import './styles/base.css'
import './styles/index.css'

import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
import TodoFooter from './components/TodoFooter'

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      // 从本地存储找todoList这个键 没找到返回一个空数组
      list: JSON.parse(localStorage.getItem('todolist')) || [],
      type: 'all', //all代表全部 yes代表已完成 no代表未完成
    }
  },
  methods: {
    delFn(id) {
      // 使用数组filter方法，返回一个满足条件的新数组
      // 在赋值给this.list
      this.list = this.list.filter((item) => item.id !== id)
    },
    addFn(task) {
      // 给list添加一个单元  是一个对象
      this.list.push({
        name: task,
        // 三元表达式 判断list这个数组的长度
        // 如果是true在这个数组最后一项的id+1赋值给当前项的id
        // 如果为false 则默认赋值100
        id: this.list.length ? this.list.at(-1).id + 1 : 100,
        isDone: false,
      })
    },
    clearFn() {
      // 清除已完成的任务
      // 通过数组的filter方法得到一个新数组并赋值给父组件里面的list
      this.list = this.list.filter((item) => !item.isDone)
    },
    changType(type) {
      // 子传父一个参数为type 子组件将type
      this.type = type
    },
    checkAll(isDone) {
      // 遍历list将子组件传过来的值赋值给list的isDone
      this.list.forEach((item) => (item.isDone = isDone))
    },
    changeFn(id) {
      // 得到当前的id
      // 通过数组的find方法是：返回满足条件的第一项元素
      // 把这个元素的isDone取反
      // 第一种写法
      // let res = this.list.find((item) => item.id === id)
      // console.log(!res.isDone)

      // 第二种写法
      // res.isDone = !res.isDone
      this.list.find((item) => item.id === id).isDone = !this.list.find(
        (item) => item.id === id
      ).isDone
    },
  },
  computed: {
    // 传给todoMain的:list="isshowList"
    // 计算属性，判断type是all yes no
    // isshowList的值是一个使用filter方法得到满足条件的新数组
    isshowList() {
      if (this.type === 'yes') {
        return this.list.filter((item) => item.isDone)
      } else if (this.type == 'no') {
        return this.list.filter((item) => !item.isDone)
      } else {
        return this.list
      }
    },
  },
  // 监听数组
  watch: {
    list: {
      deep: true, //深度监听
      handler(newVal) {
        // 当数组发生变化时触发
        // 将newVal这个数组 存储到本地
        localStorage.setItem('todoList', JSON.stringify(newVal))
      },
    },
  },
}
</script>
